<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>demo</title>
  </head>
  <body>
    <div id="app">
      <!-- 获取json数据渲染 -->
      <ul>
        <li v-for="item in dataList">
          <p>{{ item.gname }}</p>
          <p>{{ item.price}}</p>
        </li>
      </ul>
    </div>
  </body>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <!-- 1.安装axios  npm i axios -S -->
  <!-- 2.引入axios -->
  <script src="../node_modules/axios/dist/axios.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: {
        dataList: [],
      },

      methods: {
        // init() {
        //   //3.调用axios发送ajax请求
        //   axios
        //     .get("./data.json")
        //     .then((res) => {
        //       console.log(res.data); //成功的数据
        //       this.dataList = res.data; //获取数据存放到data里面。在视图层就可以调用这个数据了
        //     })
        //     .catch((err) => {
        //       console.log(err); //错误的回调返回的数据
        //     });
        // },

        async init() {
          //3.调用axios发送ajax请求
          try {
            let res = await axios.get("./data.json");
            console.log(res, 999);
            this.dataList = res.data;
          } catch (err) {
            console.log(err);
          }
        },
      },

      created() {
        this.init(); //进入页面就立马发起请求
      },
    });
  </script>
</html>
